<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript">
			
		</script>
	</head>
	<body>
		<div id="app">
			<cn >
				<template v-slot="slot2" > 
					{{slot2.item2[slot2.item3]}}
				</template>
				<template #buttom> 替换底部的内容</template>
			</cn>
			
		</div>
		
		<template id="temp">
			<div>
				<ul>
					<li v-for="(item1,index) in items1">
						<slot :item2="items2" :item3="index">
							{{item1}}
						</slot>
					</li>
				</ul>
				<slot name="buttom">底部默认内容</slot>
			</div>
		</template>
		
		<script type="text/javascript">
			const app = new Vue({
				el:"#app",
				data:{
					message:"这是父标签的内容",
				},
				components:{
					cn:{
						template:"#temp",
						data(){
							return{items1:["电影1","电影2","电影3","电影4"],items2:["电影666","电影222","电影333",],replace:"这是替换的内容",}
						},
					},
				}
			})
		</script>
	</body>
</html>
